<!DOCTYPE html>
<html>

<head>
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="../assets/libs/echarts.min.js"></script>
    <style>
        .layui-card-header {
            text-align:left;
        }
        .layuiadmin-badge {
            float:right;
            margin-top:12px;
        }
        .big-font {
            text-align:left;
            font-size: 250%;
            height: 30px;
        }
    </style>
</head>
<body>

<div class="layui-card-body" style="text-align: center;">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">PV
                    <span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="pv"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">UV
                    <span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="uv"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">周访问量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="weekPv"></p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm3 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">月访问量
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="big-font" id="monthPv"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg12 layui-col-md12">
            <div class="layui-card">
                <div class="card-block">
                    <div id="week-container" style="height:350px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg6 layui-col-md6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="browser-container" style="height:300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6 layui-col-lg6">
            <div class="layui-card">
                <div class="card-block">
                    <div id="operatingSystem-container" style="height:300px"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['admin'], function () {
        let admin = layui.admin;

        let browserChart = echarts.init(document.getElementById("browser-container"));
        browserChart.setOption({
            title : {
                text: '浏览器分布',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {},
            series : []
        });
        browserChart.showLoading();

        let osChart = echarts.init(document.getElementById("operatingSystem-container"));
        osChart.setOption({
            title : {
                text: '系统分布',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {},
            series : []
        });
        osChart.showLoading();

        let weekChart = echarts.init(document.getElementById("week-container"));
        weekChart.setOption({
            title: {
                text: '流量趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['访问量(PV)', '独立用户(UV)']
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: []
        });
        weekChart.showLoading();

        admin.req('api-log/requestStat', {}, function (data) {
            $('#pv').html(data.currDate_pv);
            $('#uv').html(data.currDate_uv);
            $('#weekPv').html(data.currWeek_pv);
            $('#monthPv').html(data.currMonth_pv);

            browserChart.hideLoading()
            browserChart.setOption({
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.browser_legendData
                },
                series : [
                    {
                        name: '浏览器',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: data.browser_datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            osChart.hideLoading()
            osChart.setOption({
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data.operatingSystem_legendData
                },
                series : [
                    {
                        name: '操作系统',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: data.operatingSystem_datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            weekChart.hideLoading()
            weekChart.setOption({
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data.statWeek_items
                    }
                ],
                series: [
                    {
                        name: '访问量(PV)',
                        type: 'line',
                        areaStyle: {},
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data: data.statWeek_pv
                    },
                    {
                        name: '独立用户(UV)',
                        type: 'line',
                        areaStyle: {},
                        data: data.statWeek_uv
                    }
                ]
            });
        }, 'GET');
    });
</script>
</body>
</html>